<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="public/css/bootstrap.css">
    <link rel="stylesheet" href="public/css/base.css">
    <script src="public/js/bootstrap.js" type="text/javascript"></script>
    <script src="public/js/jquery.min.js" type="text/javascript"></script>
    <title>Document</title>
</head>
<body>
    <div class="container" style="background:#ff0000;">这里是一个固定尺寸的容器！</div>
    <div class="h20"></div>
    <div class="container-fluid" style="background:#00ffff;">这是一个全屏的容器。</div>
    <div class="h20"></div>
    <div class="progress">
        <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width:60%;" >
        60%
        </div>
    </div>
    <div class="h20"></div>
    <div class="progress">
        <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100" style="width:90%;" >
        90%
        </div>
    </div>
    <div class="h20"></div>
    <div class="progress">
        <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width:70%;" >
        70%
        </div>
    </div>
    <div class="h20"></div>
    <div class="progress">
        <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width:80%;" >
        80%
        </div>
    </div>
    <div class="h20"></div>
    <div class="progress">
        <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" style="width:30%;" >
        30%
        </div>
    </div>
    <div class="h20"></div>
    <div class="progress">
        <div class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width:80%;" >
        80%
        </div>
    </div>
    <div class="h20"></div>
    <div class="progress">
        <div class="progress-bar progress-bar-success" style="width:35%;" >
            <span class="sr-only">35% Complete (Success)</span>
        </div>
        <div class="progress-bar progress-bar-warning progress-bar-striped" style="width:20%">
            <span class="sr-only">20% Complete (Warning)</span>
        </div>
        <div class="progress-bar progress-bar-danger progress-bar-striped" style="width:10%">
            <span class="sr-only">10% Complete (Danger)</span>
        </div>
    </div>
    <div class="h20"></div>
    <div class="bootqj">
        情景背景色练习 -- 提示条
        <div class="h20"></div>
        <div class="bg-primary">重要信息bg-primary</div>
        <div class="h20"></div>
        <div class="bg-success">成功提示：bg-success</div>
        <div class="h20"></div>
        <div class="bg-warning">警告提示：bg-warning</div>
        <div class="h20"></div>
        <div class="bg-danger">危险提示：bg-danger</div>
        <div class="h20"></div>
        <div class="alert alert-success">成功alert-success</div>
        <div class="alert alert-danger">危险alert-danger</div>
    </div>
    <div class="h20"></div>
    <table class="table table-striped table-bordered table-hover">
        <tr class="info">
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
        </tr>
        <tr class="warning">
            <td>苍井空</td>
            <td>女</td>
            <td>22</td>
        </tr>
        <tr class="active">
            <td>牛老师</td>
            <td>男</td>
            <td>23</td>
        </tr>
        <tr class="danger">
            <td>一夜枚</td>
            <td>女</td>
            <td>20</td>
        </tr>
        <tr class="success">
            <td>郭老师</td>
            <td>男</td>
            <td>25</td>
        </tr>
    </table>
</body>
</html>